<template>
    <div class="container">
        <div id="map"></div>
    </div>
</template>
  
<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
import dike from '@/assets/datas/dike.json';
import dike_z from '@/assets/datas/dikez.json';
export default {
    name: "",
    data() {
        return {};
    },

    mounted() {
        this.initMap();
    },

    methods: {
        initMap() {
            mapboxgl.accessToken =
                "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
            this.map = new mapboxgl.Map({
                container: "map", // container ID
                style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z", // style URL
                center: [118.79013542048335, 32.05775855185749], // starting position [lng, lat]
                // center: mapboxgl.MercatorCoordinate.fromLngLat([118.79013542048335,32.05775855185749]), // starting position [lng, lat]
                zoom: 5, // starting zoom
                projection: "mercator",
            });

            //
            this.map.on("click", (evt) => {
                console.log(evt.lngLat);
            });

            this.map.on('load', () => {
                this.map.addSource('dike', {
                    type: 'geojson',
                    data: dike
                });

                this.map.addLayer({
                    id: 'dike_layer',
                    source: 'dike',
                    type: 'line',
                    paint: {
                        'line-color': 'red',
                        'line-width': 3
                    }
                })

                this.map.addLayer({
                    id: "dike_layer_label",
                    type: "symbol",
                    source: "dike",
                    layout: {
                        "text-field": [
                            "format",
                            ["get", "堤防名称"],
                            {
                                "text-color": "#336699"
                            },
                            "~",
                            {},
                            ["get", "防洪标准（重现期年）"],
                            {
                                "text-color": "#ff0000"
                            }
                        ],
                        "symbol-placement": "line",
                        "text-anchor": "center",
                        "text-size": ["interpolate", ["cubic-bezier", 0.85, 0.7, 0.65, 1], ["zoom"], 4, 10, 10, 16]
                    },
                    paint: {
                        "text-halo-color": "#FFFFFF",
                        "text-halo-width": 1
                    }
                });


                //
                this.map.addSource('dike_z', {
                    type: 'geojson',
                    data: dike_z
                });

                this.map.addLayer({
                    id: 'dike_layer_z',
                    source: 'dike_z',
                    type: 'line',
                    paint: {
                        'line-color': 'red',
                        'line-width': 3
                    }
                })

                this.map.addLayer({
                    id: "dike_layer_label_z",
                    type: "symbol",
                    source: "dike_z",
                    layout: {
                        "text-field": [
                            "format",
                            ["get", "堤防名称"],
                            {
                                "text-color": "#336699"
                            },
                            "\n",
                            {},
                            ["get", "防洪标准（重现期年）"],
                            {
                                "text-color": "#ff0000"
                            }
                        ],
                        "symbol-placement": "line",
                        "text-anchor": "center",
                        "text-size": ["interpolate", ["cubic-bezier", 0.85, 0.7, 0.65, 1], ["zoom"], 4, 10, 10, 16]
                    },
                    paint: {
                        "text-halo-color": "#FFFFFF",
                        "text-halo-width": 1
                    }
                });


            })



        },
    },
};
</script>
  
<style></style>
  